<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    <script>
        // ajax  异步的JavaScript and XMLs
        // async 异步          sync 同步

        // 1   创建请求
        // 2   设置请求方法和路径
        // 3   发送请求
        // 4   等待响应 获取数据


        // 请求状态码  0-4
        // 0   未载入
        // 1   表示配置信息已经完成
        // 2   发送请求中
        // 3   服务器正在接收
        // 4   服务器接收完成

        // 响应 只有一个



        // ajax的属性、方法、事件
        // 事件：readySatechange
        // 方法：open()设置请求方式和请求路径  
        //  send()发送请求
        // 属性：readyState 准备状态   responseText  响应数据


        window.onload = function () {
            const oList = document.getElementById('list')

            // function ajax(options) {
            //     const { type, url } = options
            //     let xhr = new XMLHttpRequest()
            //     if (type === 'GET') {
            //         xhr.open(type, url)
            //         xhr.send()
            //     } else if (type === 'POST') {
            //         xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
            //         xhr.open(type, url)
            //         xhr.send()
            //     }

            //     xhr.onreadystatechange = function () {
            //         if (this.readyState === 4 && this.status === 200) {
            //             console.log(JSON.parse(this.responseText));
            //             // let data = 
            //             let data = JSON.parse(this.responseText)
            //             data.forEach(item => {
            //                 oList.innerHTML += `
            //             <tr>
            //                 <td>${item.id}</td>
            //                 <td>${item.bookname}</td>
            //                 <td>${item.price}</td>
            //                 <td>${item.typeid}</td>
            //                 <td>
            //                     <input type="button" value="删除">
            //                 </td>
            //             </tr>
            //             `
            //             });
            //         }
            //     }
            // }

            // ajax({
            //     type: 'GET',
            //     url: 'http://127.0.0.1:5500/day27/%E8%AF%BE%E5%A0%82%E4%BB%A3%E7%A0%81/data.json'
            // })


            function ajax(options) {
                return new Promise((resolve, reject) => {
                    const { type, url } = options
                    let xhr = new XMLHttpRequest()
                    xhr.onreadystatechange = function () {
                        if (this.readyState === 4) {
                            if (this.status === 200) {
                                resolve(JSON.parse(this.responseText))
                            } else {
                                reject(new Error(`error${this.status}`))
                            }
                        }
                    }

                    xhr.open(type, url)
                    if (type === 'POST') {
                        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
                    }
                    xhr.send()
                })
            }

            ajax({
                type: 'GET',
                url: 'http://127.0.0.1:5500/day27/%E8%AF%BE%E5%A0%82%E4%BB%A3%E7%A0%81/data.json'
            })
                .then(function (data) {
                    data.forEach(item => {
                        oList.innerHTML += `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.bookname}</td>
                            <td>${item.price}</td>
                            <td>${item.typeid}</td>
                            <td>
                                <input type="button" value="删除">
                            </td>
                        </tr>
                        `
                    });
                })
                .catch(function (error) {
                    console.log(error.message);
                })


        }

    </script>
</head>

<body>
    <table width="600" border="1" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>书名</th>
                <th>价格</th>
                <th>类别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="list">

        </tbody>
    </table>
</body>

</html>